<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		
	</head>
	<body>
		<div id="app">
			<qzone :qzoneattr="messagearr" v-on:sendhandle="getUserMsg($event)" v-on:delhandle="removeUserMsg($event)"></qzone>
		</div>
		
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component("qzone",{
				data:function(){
					return{
						topicContent:"",
						loveFlag:false
					}
				},
				template:'<div class="boardBox">'+
							'<div class="topicBox clearfix">'+
								'<textarea name="" rows="" cols="" placeholder="说点什么吧" v-model.lazy="topicContent"></textarea>'+
								'<a @click="send">发布话题</a>'+
							'</div>'+
							'<div class="msgBox">'+
								'<h3>全部动态</h3>'+
								'<div class="everyMsg" v-for="(item,index) in qzoneattr">'+
									'<div class="userMsg clearfix">'+
										'<div class="imgBox">'+
											'<img src="img/50.png"/>'+
										'</div>'+
										'<div class="userName">'+
											'<p>{{item.userName}}</p>'+
											'<p>{{item.time}}</p>'+
										'</div>'+
									'</div>'+
									'<div class="userContent">'+
										'<p>{{item.content}}</p>'+
										'<i @click="del(index)" class="iconfont icon-shanchu"></i>'+
										'<i class="iconfont icon-dianzan"></i>'+
										'<textarea name="" rows="" cols="" placeholder="评论"></textarea>'+
									'</div>'+
								'</div>'	+							
							'</div>'+
						'</div>',
				props:["qzoneattr"],
				methods:{
					send:function(){
						var date=new Date()
						var currentTime=date.getHours()+":"+date.getMinutes()
						var arr=["匿名用户",currentTime,this.topicContent]
						this.$emit("sendhandle",arr)
						
//						console.log(arr)
					},
					del:function(index){
						
						this.$emit("delhandle",index)
						
					}
				}
			})
			
			var app=new Vue({
				el:"#app",
				data:{
					messagearr:[
//						{"userName":"匿名用户","time":"15:51","content":"你好,世界"},
//						{"userName":"匿名用户","time":"15:11","content":"傻比"},
//						{"userName":"匿名用户","time":"00:51","content":"深夜鸡汤"},
					
					]
				},
				methods:{
					getUserMsg:function(arr){
						this.messagearr.unshift({
							"userName":arr[0],
							"time":arr[1],
							"content":arr[2]
						})
						localStorage.setItem("localUserMsg",JSON.stringify(this.messagearr))

					},
					removeUserMsg:function(index){
						this.messagearr.splice(index,1)
						localStorage.setItem("localUserMsg",JSON.stringify(this.messagearr))
					}
					
				},
				beforeMount:function(){
					var localUserMsg=localStorage.getItem("localUserMsg");
					localUserMsg=JSON.parse(localUserMsg)
					if(localUserMsg.length!=0){
						for(let i=0;i<localUserMsg.length;i++){
							this.messagearr.push(localUserMsg[i])
						}
					}
					console.log(localUserMsg.length)
				}
			})
		</script>
	</body>
</html>
